<template>
  <div class="work-nav f25">
      <router-link :to="{ name: 'Work'}">我们致力于产品UI设计</router-link><span>、</span>
      <router-link :to="{ name: 'Work', params:{name:'architecture'} }">网站前端开发</router-link><span>、</span>
      <router-link :to="{ name: 'Work', params:{name:'architecture2'} }">APP应用开发</router-link><span>、</span>
      <router-link :to="{ name: 'Work', params:{name:'architecture3'} }">小程序开发</router-link><span>、</span>
      <router-link :to="{ name: 'Work', params:{name:'architecture4'} }">产品设计</router-link><span>、</span>
      <router-link :to="{ name: 'Work', params:{name:'architecture5'} }">微服务</router-link><span>、</span>
      <router-link :to="{ name: 'Work', params:{name:'architecture6'} }">客户端/服务端架构</router-link>
  </div>

</template>
<script>
import { onMounted, ref, computed, defineComponent } from 'vue'
import { useStore } from "vuex";


export default defineComponent({
  name: 'main-nav',
  setup(){
    const store = useStore()
    const addCount = ref(1500)
    const currentRate = ref(0)
    const rate = computed(()=>store.state.walking.rate)

    const addRange = () => {
      currentRate.value += Number(addCount.value)
    }
    const culRange = () => {
      currentRate.value -= Number(addCount.value)
      currentRate.value = currentRate.value<0?0:currentRate.value
    }

    onMounted(()=>{
        // debounce(getStep, 1000)()
    })

    return {
      addRange,
      culRange,
      currentRate,
    }
  }
})
</script>
<style lang="less" scoped>
.work-nav{
  line-height: 1.5;
  a{
    color: #333;
    font-style: italic;
    &:hover{
      font-style: normal;
    }
  }
}
</style>